<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<title>jq固定焦点导航</title>
	<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
a{text-decoration: none;}
#content{width: 800px;margin: 0 auto;padding: 20px;}
#content h1{color:#08b; }
#content .item{padding: 20px;margin-bottom: 20px; border:dotted 1px #08b;}
#content .item h2{border-bottom: solid 2px #08b;margin-bottom: 10px;}
#content .item li{display: inline-block;margin-right: 10px;width: 230px;height: 230px;}
#item1 li{background: #fd8;}
#item2 li{background: #f77;}
#item3 li{background: #8ca;}
#item4 li{background: #fdd;}
#item5 li{background: #0aa;}

#menu{position: fixed;top:100px;left: 50%;margin-left: 400px;width: 80px;}
#menu li a{display: block;margin: 5px 0;font-weight: bold;color: #333;width: 80px;height: 50px;line-height: 50px;text-align: center;}
#menu li a.current,#menu li a:hover.current{color: #fff;background: #08b;}
#menu li a:hover{background: #eee;}
        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }
</style>

<script type="text/javascript">
	$(document).ready(function(){
		//滚动条发生滚动
		$(window).scroll(function(){
			var top = $(document).scrollTop();
			var menu = $("#menu");
			var items = $("#content").find(".item");
			var currentId = ""; //当前所在的楼层（item） #id
			items.each(function(){
				var m = $(this);
				var itemTop = m.offset().top;
				if (top>itemTop-200) {
					currentId = "#" + m.attr("id");
				}else{
					return false;
				};
			});
			var currentLink = menu.find(".current");
			if (currentId&&currentLink.attr("href")!=currentId) {
				currentLink.removeClass("current");
				menu.find("[href="+currentId+"]").addClass("current");
			};
			//console.log(top);
		});
	});


/*原生JS*/
/*  //定义getByClassName函数，让函数实现根据class name获取对象并返回
    function getByClassName(obj, cls){
        var elements = obj.getElementsByTagName("*");
        var result = [];
        for(var i = 0; i < elements.length; i++){
            if(elements[i].className == cls){
                result.push(elements[i]);
            }
        }
        return result;
    }
    
    function hasClass( obj, cls ){ 
	    return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
	}
	
	function removeClass( obj, cls ){ 
	    if( hasClass( obj, cls )){ 
		    //remove
			var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
			obj.className = obj.className.replace(reg, "");
		}
	}
   
    //定义getByClassName函数，让函数实现给对象增加class 
    function addClass(obj, cls){
        if(!hasClass(obj, cls)){
            obj.className += " " + cls;
        }
    }
	
	window.onload = function(){ 
		
	    window.onscroll = function(){ 		
		    var top = document.documentElement.scrollTop || document.body.scrollTop;
			
			var menus = document.getElementById("menu").getElementsByTagName("a");
			
			var items = getByClassName(document.getElementById("content"), "item");
			
			var currentId = "";
			
			for ( var i=0; i< items.length; i++ ){ 
			    var _item = items[i];
			    var _itemTop = _item.offsetTop;
				if( top > _itemTop - 200 ){ 
				    currentId = _item.id;
				} else { 
				    break;
				}			
			}
		
			 				
      //请补充此处代码，给正确的menu下的a元素class赋值current
           if(currentId){
               for(var j = 0; j < menus.length; j++){
                   var _menu = menus[j];
                   var _href = _menu.href.split("#");
                   if(_href[_href.length - 1] != currentId){
                       removeClass(_menu, "current");
                   } else {
                       addClass(_menu, "current");
                   }
               }
           } 
      	
		}	
	}*/
</script>
</head>
<body>
	<div id="menu">
		<ul>
			<li><a href="#item1" class="current">1F 南漳</a></li>
			<li><a href="#item2">2F 女装</a></li>
			<li><a href="#item3">3F 没长</a></li>
			<li><a href="#item4">4F 数码</a></li>
			<li><a href="#item5">5F 母婴</a></li>
		</ul>
	</div>
	<div id="content">
		<h1>对对对购物无</h1>
		<div id="item1" class="item">
			<h2>1F 男装</h2>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<div id="item2" class="item">
			<h2>2F 女装</h2>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<div id="item3" class="item">
			<h2>3F 妹子</h2>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<div id="item4" class="item">
			<h2>4F 阿虎</h2>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<div id="item5" class="item">
			<h2>5F 母婴</h2>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
	</div>
</body>
</html>
